<template>
  <div>
    <el-row style="margin: 10px;">
      <el-col :span="3">
        <el-button type="primary" size="medium" @click="dialogTableVisible = true">新增盘点单
        </el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="medium" @click="addDrugCheck()">保存</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" size="medium" @click="clearDrugCheck()">清空盘点单</el-button>
      </el-col>
    </el-row>
    <el-row style="margin: 10px;">
      <el-col>
        盘点号: <el-input style="width: 170px;" v-model="ruleFrom.checkId" :readonly="true"></el-input>
        盘点仓库: <el-select v-model="ruleFrom.drugEntity.drugState" :disabled="true">
        <el-option v-for="item in options" :key="item.deportId" :label="item.deportName"
                   :value="item.deportId">
        </el-option>
      </el-select>
        盈亏数量:<el-input style="width: 140px;" v-model="ruleFrom.checkKnum" :readonly="true"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin: 10px;">
      盘点备注:<el-input type="textarea" :rows="2" style="width: 500px;"  placeholder="请输入内容" v-model="ruleFrom.checkNote" ></el-input>
    </el-row>


    <el-table :data="tableDate.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              style="width: 100%"
              @selection-change="selectionLineChangeHandle2"
    >
      <el-table-column prop="drugId" type="selection"> </el-table-column>
      <el-table-column prop="drugEntity.drugName" label="项目名称" width="140"> </el-table-column>
      <el-table-column prop="drugEntity.drugGuige" label="药品规格"> </el-table-column>
      <el-table-column prop="piCi" label="药品批号" width="140"> </el-table-column>
      <el-table-column prop="numbers" label="账面数量"></el-table-column>
      <el-table-column prop="checkNum" label="盘点数量" width="160">
        <template #default="scope">
          <el-input-number size="small" style="width:140px;" v-model="scope.row.checkNum" >
          </el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="checkKnum" label="盈亏数量">
        <template #default="r">
          {{r.row.checkKnum = r.row.checkNum-r.row.numbers}}
        </template>
      </el-table-column>
      <el-table-column prop="drugEntity.drugPrice" label="售价"></el-table-column>
      <el-table-column prop="checkNote" label="备注" width="150px">
        <template v-slot:default="r">
          <el-input v-model="r.row.checkNote" />
        </template>
      </el-table-column>
    </el-table>
    <div class="fy_div" style="margin-left: 400px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableDate.length">
      </el-pagination>
    </div>
    <el-dialog title="选择盘点药库" v-model="dialogTableVisible" width="20%">
      <el-select v-model="ruleFrom.drugEntity.drugState">
        <el-option v-for="item in options" :key="item.deportId" :label="item.deportName" :value="item.deportId">
        </el-option>
      </el-select>
      <el-row style="margin: 10px;">
        <el-col :span="6">
          <el-button type="primary" size="medium" @click="dialogTableVisible=false,initDate()">
            确定
          </el-button>
        </el-col>
        <el-col :span="6" :push="4">
          <el-button type="primary" size="medium" @click="dialogTableVisible = false">取消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import http, {service} from "@/http/request";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      typeId: '', //药库编号
      drugCheck: {
        checkId: '', //序号
        checkNo: '', //盘点号
        checkPeople: '', //盘点人
        checkAuditor: '', //审核人
        checkType: '', //盘点状态
        checkKnum: '', //盈亏数量
        checkWarehouse: '', //盘点仓库
        checkNote: '', //盘点备注
        checkDate: '', //盘点日期
        inventoryData: [], //盘点详情集合
      },
      ruleFrom:{
        checkUser:"",
        checkId:"",
        checkNote:"",
        checkData:"",
        checkKnum:'',
        drugEntity:{
          drugState:'',
        },
        drugRecords:[],
      },
      tableDate:[],
      options: [

        {
          deportId:1,
          deportName:'中药房'
        },
        {
          deportId: 2,
          deportName: "西药房"
        }

      ], //仓库的下拉列表
      dialogTableVisible: false, //选择盘点药库的弹框
      currentPage:1, //初始页
      pagesize:10,   //    每页的数据
      checkDetails:[],

    }
  },
  methods: {
    //大表格
    selectionLineChangeHandle2 (val) {
      this.checkDetails = val;
    },
    //新增库存盘点表
    addDrugCheck() {
    this.ruleFrom.drugRecords=this.checkDetails;
      service.post("add-check",this.ruleFrom)
      .then(v=>{
        this.$message("盘点成功")
          this.clearDrugCheck();
      })
    },
    // 获取当前日期的方法
    randomNumber() {
      const now = new Date()
      let month = now.getMonth() + 1
      let day = now.getDate()
      let hour = now.getHours()
      let minutes = now.getMinutes()
      let seconds = now.getSeconds()
      month = this.setTimeDateFmt(month)
      hour = this.setTimeDateFmt(hour)
      minutes = this.setTimeDateFmt(minutes)
      seconds = this.setTimeDateFmt(seconds)
      return now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 23 + 100)).toString()
    },
    //清空盘点单
    clearDrugCheck() {
      this.ruleFrom.checkUser="",
          this.ruleFrom.checkId="",
          this.ruleFrom.checkNote="",
          this.ruleFrom.checkData="",
          this.ruleFrom.checkKnum='',
          this.ruleFrom.drugEntity.drugState='',
          this.tableDate=[],
          this.ruleFrom.drugRecords=[]
    },
    //保留小数点后两位
    towNumber(val) {
      return val.toFixed(2)
    },
    setTimeDateFmt(month) {
      return 0;
    },

    initDate(){
        service.post("find-drugRecordPan",this.ruleFrom)
          .then((v) => {
            this.tableDate=v.data;
            this.ruleFrom.checkId="PD"+this.randomNumber()
          })
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
  },
  created() {


    this.ruleFrom.checkUser=Cookies.get('username');
  },
  //计算属性
  computed: {
    totalMarks: function() {
      let sum = 0;
      let count = 0;
      let sums = 0;
      this.tableDate.forEach(d => {
        sum += d.numbers;
        count += d.checkNum;
      });
      sums = count - sum;
      return sums
    },

  },
  watch: {
    totalMarks: {
      deep: true,
      handler: function(newVal) {
        this.ruleFrom.checkKnum = newVal
      },
    },

  },


}
</script>


